<script>
export default {
  name: "Category",
  data() {
    return {
      index: 1,
      tab: 'first',
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
    }
  }
}
</script>

<template>
  <div class="report">
    <div class="head">
      <div class="button" :class="index === 1 ? 'active' : ''" @click="index = 1">在岗员工</div>
      <div class="button" :class="index === 2 ? 'active' : ''" @click="index = 2">待岗员工</div>
    </div>
    <div class="card" style="margin-top: 16px">
      <el-tabs v-model="tab">
        <el-tab-pane label="全行" name="first">
          <div class="grid">
            <div class="item">
              <div class="title">
                <div class="text">性别</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">学历</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">年龄</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">职称</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="总行" name="second">
          <div class="grid">
            <div class="item">
              <div class="title">
                <div class="text">性别</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">学历</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">年龄</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">职称</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="分行" name="third">
          <div class="grid">
            <div class="item">
              <div class="title">
                <div class="text">性别</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">学历</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">年龄</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
            <div class="item">
              <div class="title">
                <div class="text">职称</div>
                <div class="download">下载<i class="el-icon-download"></i></div>
              </div>
              <el-table :data="tableData" style="width: 100%;margin-top: 8px" size="small" show-summary
                        :header-cell-style="{background: '#fcf8f8', color: '#716767'}">
                <el-table-column prop="date" label="用工类型" align="center">
                  <el-table-column prop="date" label="人员分类" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="正式员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="派遣员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
                <el-table-column label="外包员工" align="center">
                  <el-table-column prop="province" label="本月人数" align="center"></el-table-column>
                  <el-table-column prop="city" label="比例" align="center"></el-table-column>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="less">
.report {
  width: 100%;
  height: 100%;
  padding: 16px;
  background: #f3f3f3;
  overflow-y: auto;

  .head {
    display: flex;
    gap: 16px;

    .button {
      width: 108px;
      height: 40px;
      border-radius: 4px;
      background: #fdece9;
      color: #cf3b26;
      border: 1px solid #cf3b26;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
    }

    .active {
      color: #ffffff;
      background: #cf3b26;
    }
  }

  .card {
    background: #ffffff;
    border-radius: 6px;
    padding: 16px;

    .grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      padding: 24px;

      .item {
        width: calc(50% - 16px);

        .title {
          width: 100%;
          display: flex;
          align-items: center;

          .text {
            font-weight: 550;
            flex: 1;
          }
        }
      }
    }
  }

  .download {
    color: #cf3b73;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;

    i {
      margin-left: 4px;
      font-size: 16px;
    }
  }
}
</style>